<template>
	<view class="">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<view class="box itemBox" v-for="(item, index) in circleList" :key="index">
			<!-- 信息 -->
			<view class="infotext">
				<view class="left flex align-center">
					<view class="touxiang" @click="heardeuser(item)">
						<u-avatar :src="item.avatar"></u-avatar>
					</view>
					<view class="infofont flex align-center">
						<view class="left flex align-center">
							<view class="name"> <text>{{ item.nickname }}</text></view>
							<view class="biaoqian" v-if="item.label" style="background: #f4CE98;"> <text>{{ item.label }}</text></view>
						</view>
					</view>
				</view>
				<view class="guanzhu" v-if="item.is_follow == 0">
					<view class="btn" @click="follow(item)">
						<text style="font-size: 32rpx;"> +关注</text>
					</view>
				</view>
			</view>
			<view @click="onJump('/pagesCircle/circledetail/circledetail?id=' + item.id)">
				<view class="detailed" style="position: relative;" v-if="item.top == 1">
					<span v-if="item.top == 1" style="position: absolute;">
						<image src="../../static/circle/zhiding.png" mode=""
							style="display: inline-block;width: 104rpx; height: 44rpx;"></image>
					</span>
					<span class='detailed-text' style="white-space: pre-wrap;text-indent:114rpx">{{ item.content }}</span>
				</view>
				<view class="detailed" v-else>
					<span v-if="item.top == 1">
						<!-- <image src="../../../static/circle/zhiding.png" mode=""
							style="display: inline-block;width: 104rpx; height: 44rpx;"></image> -->
					</span>
					<span class='detailed-text' style="white-space: pre-wrap;">{{ item.content }}</span>
				</view>
			</view>
		
			<view v-if="item.files.length <= 1 && item.files[0].file_class == 1" class="ClassBlbum"
				style="padding: 20rpx;border-radius: 15rpx;">
				<view class="u-page">
					<image :id="'img'+index" :src="item.filesList[0]" @tap="ViewImage"
						:data-images="item.fealList" :data-url="item.filesList[0]" :data-index="0"
						:mode="item.mode_text" @load="imageLoad($event,index)" :style="item.containerHeight">
					</image>
				</view>
			</view>
			<view v-else>
				<view style="padding: 20rpx;border-radius: 15rpx;" v-if="!item.files[0] == ''">
					<div>
						<view class="u-page" v-if="item.files[0].file_class == 1">
							<view class="grid col-3 grid-square flex-sub margin-top">
								<view class="bg-img bg-gray" v-for="(itemImg,indexImg) in item.filesList"
									:key="indexImg" @tap="ViewImage" :data-images="item.fealList"
									:data-url="itemImg" :data-index="indexImg">
									<image :src="itemImg" mode="aspectFill"></image>
								</view>
							</view>
						</view>
						<view v-else class="" @click="videoshow(index)">
							<video :src="item.filesList" :show-center-play-btn="true" controls="false"
								:id="'myVideo'+ index" @fullscreenchange="screenChange($event,index)"
								direction='0'></video>
						</view>
					</div>
				</view>
			</view>
		
			<!-- 圈子标题 -->
			<view class="flex align-center flex-wrap">
				<view class="circlebiji flex align-center" v-for="(i, j) in item.topic_info" :key="j"
					@click="handleNext(i)">
					<view class="circlebiji-biao">
						<img src="../../pagesCircle/static/biaoti.png" alt="">
					</view>
					<view style="margin-left: 12rpx;">{{ i.topic_name }}</view>
				</view>
		
			</view>
			<!-- 商品 -->
			<!-- 时间 -->
			<view class="circleTime flex align-center">
				<!-- 小时 -->
				<view>
					<text style="padding:2rpx 10rpx 0 0 ;font-size:30rpx;">{{ item.create_time }}</text>
				</view>
				<view>
					<text style="padding-left: 10rpx;">浏览 {{ item.look_num?item.look_num:0 }}</text>
				</view>
		
		
		
				<!-- 点赞 -->
				<view class="flex align-center" @click="handleHelp(item)">
					<u-icon name="thumb-up" :color="item.is_like == 1 ? '#E1265D' : '#b0b0b0'" size="22">
					</u-icon>
					<!-- <text style="padding: 0rpx 0 0 2rpx;">{{ item.is_like == 1 ? item.like_num : '点赞' }}</text> -->
					<text style="padding: 0rpx 0 0 2rpx;" v-if="item.like_num == 0">点赞</text>
					<text style="padding: 0rpx 0 0 2rpx;" v-else>{{ item.like_num  }}</text>
				</view>
				<!-- 评论 -->
				<!-- <view style="display: flex;"@click="onJump('/pagesCircle/circledetail/circledetail?id=' + item.id)"> -->
				<view class="flex align-center" @click="headeltopdetil(item)">
					<u-icon name="chat" color="#b0b0b0" size="22"></u-icon>
					<text style="padding: 0rpx 0 0 2rpx;">{{ item.comment_num == 0 ? '评论' :
								item.comment_num }}</text>
				</view>
				<!-- 分享 -->
				<view class="flex align-center" @click.native="handleShowShare(item)">
					<u-icon name="share" color="#b0b0b0" size="22"></u-icon>
					<text style="padding: 0rpx 0 0 2rpx;">分享</text>
				</view>
		
		
		
			</view>
		</view>
	</view>
</template>

<script>
export default {
		components: {},
		props: {
			circleList: {
				type: Array,
				default: () => {
					return [];
				}
			},
		},
		data() {
			return {};
		},
		onLoad() {
		
		},
		onShow() {},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #ffffff;
		padding:0 0 40rpx 0;
		border-bottom: 2rpx solid #F6F6F6;
	}
	::v-deep .itemBox:last-child {
		padding-bottom: 120rpx !important;
		margin-bottom: 120rpx !important;
	}
	
	.infotext {
		margin: 15rpx 30rpx;
	
		display: flex;
	
		.left {
			display: flex;
			width: 80%;
	
			.touxiang {
				width: 12%;
	
			}
	
			.infofont {
				width: 88%;
				display: flex;
				flex-direction: column;
	
				.left {
					padding: 0;
	
	
					.name {
						font-size: 35rpx;
						font-weight: bold;
						padding-right: 20rpx;
					}
	
					.biaoqian {
						margin-top: 8rpx;
						padding: 0 12rpx;
						border-radius: 30rpx;
						
						font-size: 25rpx;
						color: #7c5900;
						overflow: hidden;
						/* 第二步：让文本不会换行， 在同一行继续 */
						white-space: nowrap;
						/* 第三步：用省略号来代表未显示完的文本 */
						text-overflow: ellipsis;
					}
				}
	
				.right {
					padding-top: 10rpx;
					font-size: 26rpx;
					color: #4095e5;
				}
			}
		}
	
		.guanzhu {
			width: 20%;
			display: flex;
	
	
			justify-content: center;
			align-items: center;
			padding: 0;
	
		}
	
		.guanzhu .btn {
			border-radius: 30rpx;
			font-size: 26rpx;
			background: #dd275d;
			color: #fff;
			padding: 12rpx 26rpx;
		}
	}
	
	.detailed {
		// padding: 10rpx 30rpx;
		margin: 10rpx 30rpx;
		text-align: justify;
		word-break: break-all;
		.detailed-top {
			background: #dd275d;
			color: #fff;
			padding: 4rpx 10rpx 4rpx 10rpx;
			border-radius: 10rpx;
	
	
		}
	
		.detailed-text {
			vertical-align: bottom;
			line-height: 54rpx;
			font-size: 32rpx;
			overflow: hidden;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
	
	}
	
	.circlebiji {
		display: flex;
	
		background: #f8f1f0;
		margin: 10rpx 0 10rpx 30rpx;
		border-radius: 20rpx;
		padding-right: 20rpx;
	
	
		.circlebiji-biao {
	
			color: #fff;
			border-radius: 50%;
			width: 36rpx;
			height: 36rpx;
			text-align: center;
			font-weight: 600;
			margin-top: 2px;
		}
	}
	.circlebiji-biao img {
		width: 100%;
		height: 100%;
	}
	.circleTime {
		display: flex;
		justify-content: space-between;
		// padding: 10 14rpx;
		margin: 0 14rpx;
		background: #fff;
		padding-top: 20rpx;
		margin: 0 30rpx;
		font-size: 30rpx;

		.circleTime-right {
			color: #a1a1a1;
			width: 44%;
			display: flex;

			justify-content: space-evenly;
		}

		.circleTime-left {
			color: #a1a1a1;
			width: 50%;
			display: flex;


		}
	}

	
	
</style>